import { createRouter, createWebHistory } from "vue-router";

// 静态导入需要用到的组件
import FilmList from "./pages/FilmList.vue";
import CinemaList from "./pages/CinemaList.vue";
import Center from "./pages/Center.vue";
import Login from "./pages/Login.vue";
import Home from "./pages/Home.vue";

import One from "./pages/FilmListOne.vue";
import Two from "./pages/FilmListTwo.vue";

const router = createRouter({
  history: createWebHistory(),

  // 设置路线，路由规则
  routes: [
    {
      path: "/",
      component: Home,
      redirect: "/films/one",
      children: [
        // 配置子路由
        //    子路由的访问地址：会通过 / 拼接父路由地址
        //    建议，子路由的地址不要以 / 开头【除非所有的父级路由都是 / 】
        // 子路由所配置的组件会渲染到父路由组件中的 RouterView
        {
          path: "films", // /films
          component: FilmList,
          redirect: "/films/one",
          children: [
            {
              path: "one",
              component: One,
            },
            {
              path: "two",
              component: Two,
            },
          ],
        },
        {
          path: "cinemas", // /cinemas
          component: CinemaList,
        },
        {
          path: "center", // /center
          component: Center,
        },
      ],
    },
    {
      path: "/login",
      component: Login,
    },
  ],
});

// 导出路由器
export default router;
